<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="${ctx}/js/ztree/css/demo.css" type="text/css" rel="stylesheet">
 <link href="${ctx}/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
<%@ include file="/commons/script.jsp" %>
<script src="${ctx}/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${ctx}/js/validate.addmethod.js" type="text/javascript"></script>
<script src="${ctx}/js/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/js/ztree/js/jquery.ztree.core-3.3.min.js"></script>
<style type="text/css">
.STYLE3 {
    font-size: 14px;
    color: #CC0000;
    font-weight: bolder;
    margin-right:5px;
}

.STYLE4 {
    color: #086fd0
}

.ifile {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity = 0);
    border: 1px solid #bebebe;
    width: 250px;
}

#file2 {
    border: 1px solid #bebebe;
}

#file3 {
    border: 1px solid #bebebe;
}
</style>
<title>添加用户</title>
</head>
<body>



<div class="m_right">
    <div class="m_r_tips">
       <div class="m_r_lefttips">您现在的位置：<a href="${ctx}/admin/home.jsp">首页</a>&gt;基础数据管理&gt;增加角色</div>
       <jsp:include page="/commons/admin/admin_login_remind.jsp"/>
    </div>

    <s:form id="role_form" method="post" action="addPcRole" namespace="/admin/role">
    <input type="hidden" name="role.createUser.aid" value="${PC_ACCOUNT.aid}"/>
    <input type="hidden" name="role.type" value="0"/>
    <div class="m_r_search">
       <div class="m_r_search_con">
         <table width="700" border="0" cellspacing="0" cellpadding="0" align="center"  style="border-collapse: collapse;border-spacing: 0; border:0;margin:0px auto; ">
              <tr>
                <td width="100" class="m_r_s_con_td"></td>
                <td width="" class="m_r_s_con_text">
                           <span style="color:red" id="error_tip"></span>
                </td>
              </tr>
              <tr>
                <td class="m_r_s_con_td" colspan="2" style="color:#008aff;padding-left: 100px;text-align: left;">
                    带 <span class="STYLE3">*</span> 的必须填写
                    <br/>
                </td>
              </tr>
              <tr>
                <td width="90" class="m_r_s_con_td"><span class="STYLE3">*</span>所属机构：</td>
                <td width="" class="m_r_s_con_text">&nbsp;
                    <input id="oname" type="text" readonly="readonly" value="" class="text_input" style="width:200px;"/>
                    &nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
                    <input id="oid" name="role.organization.oid" value="" type="hidden"/>
                </td>
              </tr>
              <tr>
                <td width="100" class="m_r_s_con_td"><span class="STYLE3">*</span>角色名：</td>
                <td width="" class="m_r_s_con_text">&nbsp;
                <s:textfield name="role.roleName" id="roleName" cssClass="text_input" maxlength="50"/>
                </td>
              </tr>
               <tr>
                <td width="90" class="m_r_s_con_td" >角色描述：</td>
                <td width="" class="m_r_s_con_text">&nbsp;
                 <s:textarea id="description" name="role.description" maxlength="200" cssStyle="width:260px; height:60px;border:#bebebe 1px  solid; color:#5f5e5e; line-height:18px; font-size:12px;"></s:textarea>
                </td> 
              </tr>
              <tr>
                <td width="90" class="m_r_s_con_td">&nbsp;</td>
                <td class="m_r_s_con_text">&nbsp;</td>
              </tr>
         </table>  
                 
                 
       </div>
    </div>
    <div class="m_r_search_btn">
      <a href="#" class="m_r_bnt1 pad15"><s:submit value="添加"  /></a>
    </div>
    
    </s:form>
    
     <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="orgTree" class="ztree" style="margin-top:0; width:200px;"></ul>
    </div>
    
  </div>

</body>
<script type="text/javascript">

var setting = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick,
            onDblClick: zTreeOnDblClick
        }
    };
    
    function onClick(e, treeId, treeNode) { 
        $("#oname").val(treeNode.name);
        $("#oid").val(treeNode.id);
    }
    
    function zTreeOnDblClick(event, treeId, treeNode) {
        hideMenu();
    }

    function showMenu() {
        var cityObj = $("#oname");
        var cityOffset = $("#oname").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    $(document).ready(function(){
        $("#oid").empty();
          $.getJSON("${ctx}/admin/account/getOrgTreeByOid.do", function(data){
                $.fn.zTree.init($("#orgTree"), setting, data);
          });   
          
          
        $("#role_form").validate({
              ignore: "",  // 开启hidden验证， 1.9版本后默认关闭
              rules: {
                  "role.organization.oid":"required",
                  "role.roleName": {
                      required: true,
                      //remote:"${ctx}/admin/role/isValidRoleName.do"  
                      "remote":
	                    {
	                      url: '${ctx}/admin/role/isValidRoleName.do',
	                      type: "post",
	                      data:
	                      {
	                          "role.roleName": function()
	                          {
	                              return $('#role_form :input[name="role.roleName"]').val();
	                          }
	                      }
	                    }
                  }
              },
            messages: {
                  "role.organization.oid": "请选择机构",
                  "role.roleName": {
                      required: "请输入角色名",
                      remote:"角色名已经被占用"
                  }
              }
          });    
          
    });



</script>
</html>